<template>

  <el-container>
        <div style="width:100%; padding: 30px"  >

             <div  class="n-container">
                  <div class="b-above">新增Article</div>
                  <div class="b-main">

                       <el-form ref="form" :model="data" label-width="80px">
                            <el-form-item label="标题名称">
                                 <el-input  v-model="form.title"></el-input>
                            </el-form-item>

                            <el-form-item label="类型">
                                 <el-select v-model="form.type" placeholder="请选择活动区域">
                                      <el-option :label="1" value="0"></el-option>
                                      <el-option :label="2" value="1"></el-option>
                                   <el-option :label="3" value="2"></el-option>
                                   <el-option :label="4" value="3"></el-option>
                                 </el-select>
                            </el-form-item>

                            <el-form-item label="状态">
                                 <el-input v-model="form.status" value="" ></el-input>
                            </el-form-item>

                            <el-form-item label="跳转链接">
                                 <el-input v-model="form.url"></el-input>
                             </el-form-item>



                            <el-form-item label="配图">
                                 <el-upload
                                      action="https://jsonplaceholder.typicode.com/posts/"
                                      v-model="form.img"
                                      list-type="picture-card"
                                      class="upload-demo"
                                      :file-list="fileList"
                                      :on-preview="handlePictureCardPreview"
                                      :on-change="handleChange"
                                      :on-remove="handleRemove">
                                      <i class="el-icon-plus"></i>
                                      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>

                                </el-upload>
                                      <el-button size="small" type="success">点击上传</el-button>
                                <el-dialog :visible.sync="dialogVisible">
                                      <img width="100%" :src="dialogImageUrl" alt="">
                                </el-dialog>


                             </el-form-item>



                            <el-form-item >
                                 <div class="button-s">
                                      <div>
                                           <el-button type="primary" @click="add">立即创建</el-button>
                                           <el-button type="primary" @click="onSubmit">存为草稿</el-button>
                                      </div>
                                      <div>
                                           <el-button>取消</el-button>
                                      </div>
                                  </div>

                            </el-form-item>

                        </el-form>

                   </div>

             </div>


         </div>


  </el-container>



</template>

<script>



  export default {
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        form:{
          'title':'',
           'type':4,
           'status': 2,
          'url':'',
          'img':'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100 ',
        },


        fileList: [{
          name: 'food.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        }]
      }
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },


      add(from) {



        this.$axios.post('a/u/article',qs.stringify(this.form)).then((res)=>{
          if(res.data.message){
            console.log(res);
            this.$message('添加成功')
          }else{
            this.$message('添加失败')
          }
        })


        // this.$axios.post('a/u/article',this.form)  .then(function (response) {
        //   console.log(response);
        // })
        //   .catch(function (error) {
        //     console.log(error);
        //   });


      },


      onSubmit() {
        console.log('submit!');
      },


      handleChange(file, fileList) {
        this.fileList = fileList.slice(-3);
      }
    }
  }


  import qs from 'Qs'
  import '../style/sass/New.css';

</script>
